<script setup lang="ts">
import { formatDate } from '@/utils/day'
import { getDicts } from '@/api/system/dict/index'
import type { IGetDictsRes } from '@/api/system/dict/type'
import type { OperLog } from '@/api/system/operlog/type'

const visible = ref(false)
const title = ref('操作日志详细')
const dialogFormValue = ref<OperLog>({})

const sysOperType = ref<IGetDictsRes>([])
const sysCommonStatus = ref<IGetDictsRes>([])

const init = (editForm: OperLog) => {
	visible.value = true
	// 直接使用传入的数据
	dialogFormValue.value = { ...editForm }
}

// 根据值查找标签
const businessTypeFindLabel = (val: string) => {
	return sysOperType.value.find(item => item.value === Number(val))?.label || val
}

const statusFindLabel = (val: string) => {
	return sysCommonStatus.value.find(item => item.value === Number(val))?.label || val
}

const getMethods = () => {
	getDicts('sys_sys_oper_type').then(data => {
		sysOperType.value = data
	})
	getDicts('sys_sys_common_status').then(data => {
		sysCommonStatus.value = data
	})
}

onMounted(() => {
	getMethods()
})

defineExpose({
	init
})
</script>

<template>
	<ElDialog
		v-model="visible"
		:title="title"
		:close-on-click-modal="false"
		width="800px"
	>
		<el-form
			:model="dialogFormValue"
			label-width="100px"
		>
			<el-row>
				<el-col :span="12">
					<el-form-item label="操作模块：">
						{{ dialogFormValue.title }} / {{ businessTypeFindLabel(dialogFormValue.businessType + '') }}
					</el-form-item>
					<el-form-item label="登录信息："> {{ dialogFormValue.operName }} / {{ dialogFormValue.operIp }} </el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="请求地址：">{{ dialogFormValue.operUrl }}</el-form-item>
					<el-form-item label="请求方式：">{{ dialogFormValue.requestMethod }}</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="操作方法：">{{ dialogFormValue.method }}</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="请求参数：">
						<div class="overflow-auto">{{ dialogFormValue.operParam }}</div>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="返回参数：">
						<span class="break-all">{{ dialogFormValue.jsonResult }}</span>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="操作状态：">
						{{ statusFindLabel(dialogFormValue.status + '') }}
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="消耗时间：">{{ dialogFormValue.costTime }}毫秒</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="操作时间：">{{ formatDate(dialogFormValue.operTime) }}</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item
						v-if="dialogFormValue.status === 1"
						label="异常信息："
					>
						{{ dialogFormValue.errorMsg }}
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="visible = false">关 闭</el-button>
			</div>
		</template>
	</ElDialog>
</template>

<style scoped>
::v-deep(.el-form-item__label) {
	font-weight: 700;
}
</style>
